<template>
  <!--作业列表-->
  <div class="list">
     <div class="elist">
         <el-table :data="filteredHomeworkList"  style="width: 100%;padding:15px" v-loading="loading" :row-class-name="tableRowClassName">
             <el-table-column
                 prop="homeworkName"
                 label="作业名称"
                 width="180"
                 >
                 <template slot-scope="scope">
                     <i class="iconfont icon-wenjian-wendangtubiao"></i>
                        <span style="margin-left: 10px">{{ scope.row.homeworkName }}</span>
                 </template>
             </el-table-column>
             <el-table-column
                 prop="start"
                 label="开始时间"
                 width="200">
             </el-table-column>
             <el-table-column
                 prop="end"
                 label="截止时间"
                 width="300">
             </el-table-column>
             <el-table-column
                 prop="state"
                 label="作业状态"
                 width="200">
             </el-table-column>
             <el-table-column
                 prop="option"
                 label="操作">
                 <template slot-scope="scope">
                    
                    <el-button
                     size="mini"
                     @click="handleView(scope.row)">查看</el-button>
                
                     <el-button
                     size="mini"
                     type="danger"
                     @click="handleDelete(scope.row)">删除</el-button>
                
                 </template> 
             </el-table-column>
         </el-table>
     </div>
      <!-- 新分页样式 -->
     <div class="pagination-wrapper">
         <el-pagination
             @size-change="handleSizeChange"
             @current-change="handleCurrentChange"
             :current-page="currentPage"
             :page-sizes="[8, 12, 16, 20]"
             :page-size="pageSize"
             layout="total, sizes, prev, pager, next, jumper"
             :total="totalCount">
         </el-pagination>
     </div>
 </div>
</template>
<script>
import axios from 'axios';

export default{
    name: 'HomeworkCorrect',
    props: {
        courseclassS: {
            type: String,
            required: false,
            default: ''
        },
        highlightedRows: {
            type: Set,
            required: false,
            default: () => new Set()
        }
    },
    data() {
        return {
            allHomeworkList: [],
            loading: false,
            currentPage: 1,
            pageSize: 8
        }
    },
    computed: {
        filteredHomeworkList() {
            if (!this.allHomeworkList) return [];
            return (this.allHomeworkList || [])
                .filter(homework => 
                    homework.courseclass === this.courseclassS && 
                    homework.state === '已批改'
                )
                .sort((a, b) => {
                    if (!a.start || !b.start) return 0;
                    return new Date(a.start) - new Date(b.start);
                });
        },
        totalCount() {
            return this.filteredHomeworkList.length;
        }
    },
    watch: {
        courseclassS: {
            handler(newVal) {
                console.log('课程名称变化:', newVal);
                if (newVal) {
                    this.getHomeworkList();
                }
            },
            immediate: true
        }
    },
    methods: {
        async getHomeworkList() {
            try {
                this.loading = true;
                console.log('正在获取作业列表，课程名称:', this.courseclassS);
                
                const response = await axios.get('http://localhost:9999/homework/getHomeworkState', {
                    params: {
                        state: '已批改'
                    }
                });
                
                console.log('接口返回的原始数据:', response.data);
                this.allHomeworkList = response.data;
                
                // 打印筛选后的数据
                console.log('筛选后的作业列表:', this.filteredHomeworkList);
                
            } catch (error) {
                console.error('获取作业列表失败:', error);
                this.$message.error('获取作业列表失败');
            } finally {
                this.loading = false;
            }
        },
        handleView(row) {
            if (!row || !row.homeworkId) {
                this.$message.error('作业信息不完整');
                return;
            }
            console.log('查看作业:', row);
            this.$router.push({
                path: '/layout/shlist',
                query: {
                    homeworkId: row.homeworkId
            
                }
            }); 
        },
        
        handleSizeChange(newSize) {
            this.pageSize = newSize;
            this.currentPage = 1;
        },
        handleCurrentChange(currentPage) {
            this.currentPage = currentPage;
        },
        handleDelete(row) {
            this.$confirm('确认删除该作业吗？此操作不可恢复', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(async () => {
                try {
                    const response = await axios.get('http://localhost:9999/homework/deleteHomework', {
                        params: {
                            homeworkId: row.homeworkId
                        }
                    });
                    
                    if (response.data) {
                        this.$message.success('删除成功');
                        // 重新获取列表数据
                        this.getHomeworkList();
                    } else {
                        this.$message.error('删除失败');
                    }
                } catch (error) {
                    console.error('删除作业失败:', error);
                    this.$message.error('删除失败，请稍后重试');
                }
            }).catch(() => {
                // 取消删除操作
                this.$message.info('已取消删除');
            });
        },
        tableRowClassName({row}) {
            return this.highlightedRows.has(row.homeworkId) ? 'highlighted-row' : '';
        }
    }
};

</script>

<style lang="less" scoped>
.list {
background-color: white;
width: 1300px; /* 设置课程容器的宽度 */
min-height: 800px;
margin: -110px auto;
position: relative;
display: flex;
flex-direction: column;
}


.elist {
  padding-left: 80px;
  flex-grow: 1; /* 让 elist 占据剩余空间 */
  position: relative;
  padding-bottom: 80px;
}

.pagination-wrapper {
    position: absolute;
    bottom: 20px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    background-color: white;
    padding: 10px 0;
}

.el-button {
background: rgba(53, 181, 208, 1);
color: white;


&[type="danger"] {
    background: #F56C6C;
    
    &:hover {
        background: #F78989;
    }
}
}

/deep/ .highlighted-row {
    background-color: #fdf5e6 !important;
}

/deep/ .highlighted-row:hover td {
    background-color: #faebd7 !important;
}
</style>